<template>
    <Layout class="p-5 bg-white">
        <Form :model="store" :label-width="80">
			<Layout class="w-100 bg-white p-1">
				<h5>门店开店操作</h5>
				<Row>
					<Col span="12">
						<FormItem class="w-50" label="编号">
						<label>{{store.storeId}}</label>
						</FormItem>
					</Col>
					<Col span="12">
						<FormItem class="w-100" label="状态">
							<Button type="error" @click="closeStore" v-if="store.statu">闭店</Button>
							<Button type="success" @click="openStore" v-else>开店</Button>
							
							
							<!-- <i-Switch v-model="store.statu"  @on-change="statuChange" size="large">
								<span slot="open">启用</span>
								<span slot="close">停用</span>
							</i-Switch> -->
						</FormItem>
					</Col>
				</Row>
			</Layout>
			<Layout class="w-100 bg-white rounded shadow">
				<div class="p-2 border-bottom border-title d-flex justify-content-between align-items-center">
					<span>基础信息</span>
					<Button @click="changeStore" type="primary">提交</Button>
				</div>
				<Row class="p-3">
					<Col span="12">
						<FormItem class="w-100" label="店名">
							<Input v-model="store.name"/>
						</FormItem>
					</Col>
					<Col span="12">
						<FormItem class="w-100" label="联系人">
							<Input v-model="store.conPerson"/>
						</FormItem>
					</Col>
					<Col span="12">
						<FormItem class="w-100" label="地址">
							<Input v-model="store.address"/>
						</FormItem>
					</Col>
					<Col span="12">
						<FormItem class="w-100" label="联系电话">
							<Input v-model="store.conTel"/>
						</FormItem>
					</Col>
					<Col span="24">
						<FormItem class="w-100" label="描述">
							<Input v-model="store.des" 
								type="textarea" 
								:rows="4" placeholder="请输入门店描述"></Input>
						</FormItem>
					</Col>
				</Row>

			</Layout>		
			<Layout class="w-100 bg-white rounded shadow mt-4">
				<div class="p-2 border-bottom border-title  d-flex justify-content-between align-items-center">
					<span>门禁设备信息</span>
					<Button type="error" @click="newAccess(store.storeId)">新增</Button>
				</div>
				<Table :columns="tableInfo.columnInfo" :data="access">
					<template slot-scope="{ row, index }" slot="statu" >
						<span v-if="row.statu">启用</span>
						<span v-else>停用</span>
					</template>
					<template slot-scope="{ row, index }" slot="ioFlg">
						<span v-if="row.ioFlg">进门</span>
						<span v-else>出门</span>
					</template>
					<template slot-scope="{ row, index }" slot="action">
						<Button type="primary" size="small" style="margin-right: 5px" @click="showAccess(row.accessId)">详细</Button>
						<Button type="primary" size="small" style="margin-right: 5px" @click="openDoor(row.accessId)">开门</Button>						
						<Button type="error" size="small" @click="removeAccess(row.accessId)">删除</Button>
					</template>
				</Table>
			</Layout>
			<Layout class="w-100 bg-white rounded shadow mt-4">
				<div class="p-2 border-bottom border-title d-flex justify-content-between align-items-center">
					<span>微信公众号信息</span>
					<Button type="error" @click="newWx(store.storeId)">新增</Button>
				</div>
				<Table :columns="tableInfo.columnInfo1" :data="wxServers">
					<template slot-scope="{ row, index }" slot="statu">
						<span v-if="row.statu">启用</span>
						<span v-else>禁用</span>
					</template>
					<template slot-scope="{ row, index }" slot="action">
						<Button type="primary" size="small" style="margin-right: 5px" @click="showWx(row.wid)">详细</Button>
						<Button type="error" size="small" @click="removeWx(row.wid)">删除</Button>
					</template>
				</Table>
			</Layout>
			
			<Layout class="w-100 bg-white rounded shadow mt-4">
				<div class="p-2 border-bottom border-title d-flex justify-content-between align-items-center">
					<span>门店管理员账号信息</span>
					<Button type="primary" @click="updateStoreUser">保存</Button>
				</div>
				<Row class="p-3">
					<Col span="8">
						<FormItem class="w-100" label="账户">
							<Input v-model="storeUser.account"/>
						</FormItem>
					</Col>
					<Col span="8">
						<FormItem class="w-100" label="密码">
							<Input v-model="storeUser.password"/>
						</FormItem>
					</Col>
				</Row>
			</Layout>
			
        </Form>
    </Layout>

</template>
<script>
	export default {
		data() {
			return {
				store:{
					storeId:"",
					name:"",
					address:"",
					conTel:"",
					conPerson:"",
					des:"",
					statu:"",
				},
				access:[],
				wxServers:[],
				storeUser: {
					userId: "",
					account: "",
					password: ""
				},
				tableInfo: {									
					currentPage: 1,
					total: 0,
					columnInfo: [
						{
							title: "门禁编号",
							key: "accessId",
							width: 70
						},
						{
							title: "设备型号",
							key: "modelNumber",
							width: 150
						},
						{
							title: "设备ID",
							key: "uid",
							width: 100
						},
						{
							title: "授权Key",
							key: "ukey",
							width: 150
						},
						{
							title: "门禁序列号",
							key: "sn",
							//width: 200
						},
						{
							title: "状态",
							slot: "statu",
							width: 100
						},
						{
							title: "进/出门",
							slot: "ioFlg",
							width: 100
						},
						{
							title: "操作",
							slot: 'action',
							width: 200
						}
					],
					columnInfo1: [
						{
							title: "编号",
							key: "wid",
							width: 70
						},
						{
							title: "公众号类型",
							key: "wxType",
							width: 110
						},
						{
							title: "APPID",
							key: "appId",
							width: 180
						},
						{
							title: "商户号",
							key: "merchantId",
							width: 180
						},
						{
							title: "支付地址",
							key: "payUrl"
						},
						{
							title: "状态",
							slot: "statu",
							width: 80
						},
						{
							title: "操作",
							slot: 'action',
							width: 200
						}
					],
					columnInfoUser: [
						{
							title: "编号",
							key: "userId",
							width: 86
						},
						{
							title: "账号",
							key: "account",
							width: 180
						},
						{
							title: "密码",
							key: "password",
							width: 180
						},
						{
							title: "电话",
							key: "tel",
							width: 180
						},
						{
							title: "微信OPENID",
							key: "open_id",
							width: 180
						},
						{
							title: "身份证",
							key: "sec_id",
						},
						{
							title: "创建时间",
							key: "ct",
							width: 200
						},
					],
				}
			}
		},
		methods: {
			updateStoreUser: function() {
				this.http.put({
					// baseURL: "https://infojianshen.yinyangshipu.vip:7710/shop/admin",
				    url: "/user/store/info",
				    param: this.storeUser,
				}).then(() => {
				    this.message.info("修改成功");
				});
			},
			openStore: function() {
				this.store.statu = false;
				this.http.put({
					url: "/store/store/"+this.store.storeId+"/open"
				}).then(res => {
					this.message.info("开店成功");
					this.store.statu = true;
				});
			},
			closeStore: function() {
				this.store.statu = true;
				this.http.put({
					url: "/store/store/"+this.store.storeId+"/close"
				}).then(res => {
					this.message.info("闭店成功");
					this.store.statu = false;
				});
			},
			statuChange: function() {
				console.log(1)
				if (this.store.statu) {
					
				} else {
					
				}
			},
			newWx: function(storeId) {
				this.$router.push({
					name: "wxServer_new",
					params: {
						storeId
					}
				});
			},
			newAccess: function(storeId) {

				this.$router.push({
					name: "access_new",
					params: {
						storeId:storeId
					}
				});
			},
			showWx: function(wId) {
				this.$router.push({
					name: "wxServer_detail",
					params: {
						wId
					}
				});
			},
			openDoor:function(e){
				 this.http.post({
					url: "store/access/cmd",
					param: {
						accessId:e,
						CmdCode:1
					}
				})
			},
			showAccess: function(accessId) {
				this.$router.push({
					name: "access_detail",
					params: {
						accessId
					}
				});
			},
			removeAccess: function(accessId) {
				
				this.message.confirm({
					title:"删除提示",
					content:"即将删除门禁，确定么？",
					onOk: () => {
						this.http.delete({
							url:"/store/access/info",
							param:{
								accessId : accessId
							}
						}).then(data =>{
							this.search();
						});
					},
					onCancel:() =>{
						this.message.info('操作已取消');
					}
				});
			},
			removeWx: function(wid) {
				
				this.message.confirm({
					title:"删除提示",
					content:"即将删除微信公众号，确定么？",
					onOk: () => {
						this.http.delete({
							url:"/store/wx-server/info",
							param:{
								wId : wid
							}
						}).then(data =>{
							this.search();
						});
					},
					onCancel:() =>{
						this.message.info('操作已取消');
					}
				});
			},
			changeStore: function() {
				
				if(this.store.conTel==''||this.store.conTel==undefined||this.store.conTel==null){
					this.message.error("电话号码不能为空");
					return;
				}
				
				const reg =/^[1][3-9][0-9]{9}$/;
				if(!reg.test(this.store.conTel)){
					this.message.error("电话号码不符合规范");
					return;
				}
				
				
				if(this.common.isEmptyString(this.store.name)){
					this.message.error("店名不能为空");
					return;
				}
				if(this.common.isEmptyString(this.store.conPerson)){
					this.message.error("联系人不能为空");
					return;
				}
				
				if(this.common.isEmptyString(this.store.address)){
					this.message.error("地址不能为空");
					return;
				}
					
				this.http.put({
					url: "/store/store/info",
					param: {
						param: this.store
					}
				}).then(data => {
					this.message.info("修改成功");
					this.$tabs.close();
				});
			},
			init: function () {
			    this.search();
			},
			cancel: function() {
				this.$tabs.close();
			},
			search: function () {
			    this.http.get({
			        url: "/store/store/"+this.storeId+"/get",
			    }).then(data => {
                    this.store = data.store[0];
					this.access = data.access;
					this.storeAccess = data.storeAccess;
					this.wxServers = data.wx_server;
					this.storeUser = data.store_user[0];
					console.log(this.storeUser);
                });
			}
		},
		created: function(){
		},
		mounted: function () {
			this.storeId = this.$route.params.storeId;
			this.init();
		},
		watch:{
			$route(to,from){
				this.init();
			}
		},
		
		 
		
		
	}
</script>

<style>
	.border-title {
		border-color: #CCCCCC;
	}
</style>

